<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>欢迎登录</title>

<style>
* {
	padding: 0;
	margin: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

.cms_login {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	background-repeat: no-repeat;
	background-image: url('img/p.jpg');
	background-size: 100% 100%;
}

.cms_login_container {
	width: 500px;
	height: 380px;
	border-radius: 10px;
	border: 1px solid #ccc;
	box-shadow: 0px 0px 10px #ccc;
	background-color: #fff;
	opacity: 0.8;
	position: absolute;
	top: 20%;
	left: 33%;
}


.cms_login_container{margin-left:auto;margin-right:auto;border:1px #999 dashed;}

.cms_login_text {
	height: 70px;
	width: 100%;
	line-height: 80px;
	text-align: center;
	font-size: 30px;
}

.cms_login_table {
	font-size: 18px;
}

/* 统一盒子样式 */
.divBox {
	height: 40px;
	width: 100%;
	line-height: 60px;
	text-align: center;
}
.divBox1 {
	height: 40px;
	width: 100%;
	text-align: center;
}

.cms_login_ipt {
	height: 30px;
	width: 290px;
	padding-left: 5px;
	border-radius: 5px;
	outline: none;
}
.cms_login_yzm {
	height: 30px;
	width: 195px;
	padding-left: 5px;
	border-radius: 5px;
	outline: none;
}
.cms_login_yzm1 {
	height: 40px;
	width: 90px;
	padding: 5px 0px;
	vertical-align:middle;
	/* vertical-align:bottom; */
	border-radius: 5px;
	outline: none;
}
.cms_login_sel {
	height: 33px;
	width: 298px;
	padding-left: 5px;
	border-radius: 5px;
	outline: none;
}

input:focus {
	border-radius: 5px;
	outline: none;
	border: 2px solid #66afe9;
	box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075), 0 0 8px
		rgba(102, 175, 233, 0.6);
}

.margin_right10 {
	margin-right: 10px;
}

.margin_top60 {
	margin-top: 50px;
}

.login_btn {
	width: 110px;
	height: 100%;
	background-color: #1360a7;
	border-radius: 10px;
	outline: none;
	font-size: 22px;
	color: white;
	letter-spacing: 5px;
}

.login_btn:hover {
	background-color: #1e5d5d;
}
</style>
</head>

<body>
	<div class="cms_login">
		<div class="cms_login_container">
			<div class="cms_login_text">欢迎登录</div>
			<div class="cms_login_table">
				<form method="post">
					<div class="divBox">
						<input type="text" placeholder="请输入用户名" class="cms_login_ipt" name="login" required="required">
					</div>
					<div class="divBox">
						<input type="password"
							placeholder="请输入密码" class="cms_login_ipt" name="pwd" required="required">
					</div>
					<div class="divBox">
						<input type="text" placeholder="验证码" class="cms_login_yzm" id="yzm">
						<canvas id="canvas" class="cms_login_yzm1" ></canvas>
					</div>
					<div class="divBox">
						<select name="utype" class="cmm_code cms_login_sel" code="C001" def="-- 登录身份 --" ></select>
					</div>
					<div class="divBox1 margin_top60" >
						<button id="loginBtn" type="button" class="login_btn">登录</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	
<script src="../../resource/lib/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="../../resource/lib/jquery.ui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../resource/extjs/extendJQ.js" type="text/javascript"></script>
<script type="text/javascript" src="../../resource/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../common/js/cmm.js" charset="utf-8"></script>
<script language="javascript">
	layui.use(['jquery','login'], function(){
		var $ = layui.jquery;
	    var login = layui.login;
	    
	    $("#loginBtn").click(function(){
	    	//判断验证码
		    var val = $("#yzm").val().toLowerCase();
	        var num = show_num.join("");
	        if(val==''){
	            alert('请输入验证码！');
	            return false;
	        }else if(val != num){
	            alert('验证码错误！请重新输入！');
	            return false;
	        }
	        login.login("../index/index.html");
	    });
  	});  
</script>
<script>
	//验证码初始化
	var show_num = [];
    $(function(){
        draw(show_num);

        $("#canvas").on('click',function(){
            draw(show_num);
        })
    })

    function draw(show_num) {
        var canvas_width=$('#canvas').width();
        var canvas_height=$('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度
        
        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>
</body>

</html>